<template>
    <div class="bottom-bar">
        <div class="sys-tab">
            <div v-for="(item, index) in menusArr" :key="index" class="tab-button" @click="goTo(item.path)">
                <span class="btn-text">{{ item.menuName }}</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { message } from 'ant-design-vue';
import { onMounted, ref } from 'vue';
import { alovaInstance } from "/@/utils/request.js";
const menusArr = ref([])
onMounted(() => {
    getMenus()
})
const getMenus = async () => {
    const res = await alovaInstance.Get('/Portal/TYHome.ashx?Method=GetSystemPath')
    if (res.data.length > 0) {
        menusArr.value = res.data.map(item => {
            return {
                menuName: item.systemName,
                class: 'tab-data',
                path: item.path,
            }
        })
    }
}
const goTo = (path) => {
    if (!path) {
        message.info('功能开发中，敬请期待！')
        return
    }
    // 使用 window.open 在新标签页打开链接
    window.open(path, '_blank');
}
</script>
<style lang="less" scoped>
.bottom-bar {
    height: 46px;
    color: #fff;
    text-align: center;
    background-image: url("/@/assets/home/bar1.png");
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .sys-tab {
        position: absolute;
        left: 28%;
        width: 44%;
        bottom: 35px;
        font-size: 16px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #C9CDCF;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        .tab-button {
            position: relative;
            width: 140px;
            height: 84px;
            background-image: url("/@/assets/home/btn.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            cursor: pointer;
            .btn-text{
                position: absolute;
                display: block;
                text-wrap: nowrap;
                top: 27px;
                left: 85px;
                transform: translate(-50%, -50%);
                font-size: 15px;
            }
            img {
                width: 100%;
            }
        }

        .tab-button:hover {
            transform: scale(1.05); /* 鼠标悬停时按钮略微放大 */
        }

        .tab-button:active {
            transform: scale(0.98); /* 点击时按钮略微缩小 */
        }
    }
}
</style>